<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:按键修饰符</title>

		<script src="https://unpkg.com/vue@next"></script>
	</head>

	<body>
		<div id="app">
			<p style = "font-size:25px;">计数器: {{ counter }}</p>
			<button @click = "counter++" style = "font-size:25px;">点我</button>
		</div>
	</body>
	<script>
		//view model
		const app = {
		  data() {
		    return {
		      counter: 1
		    }
		  }
		}
		vm = Vue.createApp(app).mount('#app')
		vm.$watch('counter', function(nval, oval) {
		    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
		});
		
	</script>

</html>